<template>
  <div>
    <div
      class="form-input-area"
      style="padding: 30px 40px 30px; position: relative"
    >
      <Spin :withIcon="true" v-if="loading"></Spin>
<!--      <div
        class="tips-area tips-icon"
        style="margin-bottom: 20px"
        :style="{
          backgroundImage: `url(${require('_a/userImages/' +
            (colorType == 0
              ? 'tips-icon'
              : colorType == 1
              ? 'tips-icon-g'
              : colorType == 2
              ? 'tips-icon-b'
              : 'tips-icon-p') +
            '@2x.png')})`,
        }"
      >-->
        <div class="tips-area" style="margin-bottom: 20px">
        温馨提示：为了给您提供更好的域名转入体验，0元以及使用优惠券转入的域名，系统将默认不再发送确认转入邮件，请知悉!
      </div>
      <div class="submit-button-style-first div-line">
        <RadioGroup v-model="rule">
          <Radio class="radio-mg-r-20" label="0">单个转入</Radio>
          <Radio class="radio-mg-r-20" label="1">批量转入</Radio>
        </RadioGroup>
      </div>
      <template v-if="rule == '0'">
        <div class="flx-row-s-c div-line long-name-nece">
          <div class="long-name">转入的域名</div>
          <Input
            v-model.trim="domainName"
            placeholder="请填写"
            style="width: 200px"
          />
        </div>
        <div class="flx-row-s-c div-line long-name-nece">
          <div class="long-name">转移码</div>
          <Input
            v-model.trim="code"
            placeholder="请填写"
            style="width: 200px"
          />
        </div>
      </template>
      <template v-else-if="rule == '1'">
        <div class="flx-row-s-s div-line">
          <div class="flx-col-s-s">
            <div class="long-name">转入的域名</div>
            <div class="style-contnent c-r">（格式：域名,转移码）</div>
          </div>
          <div style="width: 600px; position: relative">
            <Input
              v-model="dnText"
              wrap="hard"
              type="textarea"
              :autosize="{ minRows: 10, maxRows: 10 }"
              @on-keyup="getDNNumber"
              @on-blur="getAvailableDN"
              placeholder="每行一个域名，最多一次性转入100个，单行域名格式为：域名,转移码，例如：190.com,1234567"
            />
            <span class="c-g number-tips">{{ dnNumber }}/500</span>
          </div>
        </div>
      </template>
      <div class="flx-row-s-c div-line">
        <div class="long-name">DNS设置</div>
        <RadioGroup v-model="dnsType">
          <Radio class="radio-mg-r-20" label="0">原DNS</Radio>
          <Radio class="radio-mg-r-20" label="1">我司DNS</Radio>
        </RadioGroup>
      </div>
      <div class="btn-area">
        <div class="flx-row-s-c submit-button-style-first div-line">
          <Checkbox v-model="agree"></Checkbox>
          我已同意并阅读
          <span class="o-form-font-button" @click="ruleModelShow = true"
            >《{{ ruleTitle }}》</span
          >
        </div>
        <div
          class="
            user-strong-button
            submit-button-style submit-button-style-first
            div-line
          "
          @click="submit"
        >
          提交转入
        </div>
      </div>

      <template-push-result-modal
        title="域名转入结果"
        :show.sync="resultModalShow"
        :sucList="resultList"
      ></template-push-result-modal>
    </div>

    <div class="rule-area">
      <user-tab-list
        :list="tablist"
        :normal="true"
        @click-tab="clickTab"
      ></user-tab-list>
      <template v-if="tabActive == 0">
        <div class="form-input-area">
<!--          <div
            class="tips-area tips-icon-2"
            style="margin-bottom: 30px"
            :style="{
              backgroundImage: `url(${require('_a/userImages/' +
                (colorType == 0
                  ? 'warming'
                  : colorType == 1
                  ? 'warming-g'
                  : colorType == 2
                  ? 'warming-b'
                  : 'warming-p') +
                '@2x.png')})`,
            }"
          >-->
          <div
              class="tips-area"
              style="margin-bottom: 30px"
          >
            域名转入(Domain
            Transfer）又称域名转移注册商，即将某域名从当前的注册商A转出，转入到190进行管理。
          </div>
          <div class="flx-row-s-c f-14" style="margin-bottom: 8px">
            <h3 class="f-w-600 c-black">转入的域名需要符合以下转入规则:</h3>
          </div>
          <p
            class="flx-row-s-c f-w-400 c-black"
            style="line-height: 3"
            v-for="(item, index) in ruleList"
            :key="index"
          >
            <span class="c-text pub-m-t-1"></span>
            <span>{{ item }}</span>
          </p>
        </div>
      </template>
      <template v-if="tabActive == 1">
        <div class="form-input-area">
          <div class="process-area flx-row-c-c">
            <div class="item flx-row-c-c">
              <div class="item-inner flx-row-c-c">1</div>
              <div class="flx-col content-area">
                <div class="flx-col" style="height: 56px; padding-top: 12px">
                  <span class="title">填写域名、转移码</span>
                </div>

                <div class="flx-row-s-s pub-m-t-20 c-black">
                  <span class="c-text"></span>
                  <p style="width: 150px">
                    向域名原注册商提交域名转出,获取转移密码
                  </p>
                </div>

                <div class="flx-row-s-s c-black">
                  <span class="c-text"></span>
                  <p style="width: 150px">域名转入秘籍（新手必看）</p>
                </div>
              </div>
            </div>
<!--            <div
              class="long-arrow-2"
              :style="{
                backgroundImage: `url(${require('_a/userImages/' +
                  (colorType == 0
                    ? 'long-arrow-2'
                    : colorType == 1
                    ? 'long-arrow-2-g'
                    : colorType == 2
                    ? 'long-arrow-2-b'
                    : 'long-arrow-2-p') +
                  '@2x.png')})`,
              }"
            ></div>-->
            <div
                class="long-arrow-2"
            ></div>
            <div class="item flx-row-c-c">
              <div class="item-inner flx-row-c-c">2</div>
              <div class="flx-col content-area">
                <div class="flx-col" style="height: 56px; padding-top: 12px">
                  <div class="title">提交购物车、进行结算</div>
                </div>
                <div class="flx-row-s-s pub-m-t-20 c-black">
                  <span class="c-text"></span>
                  <p style="width: 150px">域名转入免费</p>
                </div>

                <div class="flx-row-s-s c-black">
                  <span class="c-text"></span>
                  <p style="width: 150px">域名转入价格即为续费一年</p>
                </div>
              </div>
            </div>
<!--            <div
              class="long-arrow-2"
              :style="{
                backgroundImage: `url(${require('_a/userImages/' +
                  (colorType == 0
                    ? 'long-arrow-2'
                    : colorType == 1
                    ? 'long-arrow-2-g'
                    : colorType == 2
                    ? 'long-arrow-2-b'
                    : 'long-arrow-2-p') +
                  '@2x.png')})`,
              }"
            ></div>-->
            <div
                class="long-arrow-2"
            ></div>
            <div class="item flx-row-c-c">
              <div class="item-inner flx-row-c-c">3</div>
              <div class="flx-col content-area">
                <div class="flx-col" style="height: 60px; padding-top: 10px">
                  <span class="f-14 c-d2 title">验证所有者邮箱</span>
                  <span class="f-14 c-r pub-m-t-10 pub-m-l-15"
                    >(cn等国内域名无需此步)</span
                  >
                </div>
                <div class="flx-row-s-s pub-m-t-20 c-black">
                  <span class="c-text"></span>
                  <p style="width: 150px">
                    转入com等国际域名，系统发送确认邮件至域名所有者邮箱，需在15日内点击链接进行确认
                  </p>
                </div>
              </div>
            </div>
<!--            <div
              class="long-arrow-2"
              :style="{
                backgroundImage: `url(${require('_a/userImages/' +
                  (colorType == 0
                    ? 'long-arrow-2'
                    : colorType == 1
                    ? 'long-arrow-2-g'
                    : colorType == 2
                    ? 'long-arrow-2-b'
                    : 'long-arrow-2-p') +
                  '@2x.png')})`,
              }"
            ></div>-->
            <div
                class="long-arrow-2"
            ></div>
            <div class="item flx-row-c-c">
              <div class="item-inner flx-row-c-c">4</div>
              <div class="flx-col content-area">
                <div class="flx-col" style="height: 56px; padding-top: 12px">
                  <span class="f-14 c-d2 title">验证转移密码，转入成功</span>
                </div>
                <div class="flx-row-s-s pub-m-t-20 c-black">
                  <span class="c-text"></span>
                  <p style="width: 150px">
                    转移密码验证通过，域名开始转入190。转入处理需要大约5-7天。5-7天后域名成功转入190
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-if="tabActive == 2">
        <div class="form-input-area">
<!--          <div
            class="tips-area tips-icon-2"
            style="margin-bottom: 20px"
            :style="{
              backgroundImage: `url(${require('_a/userImages/' +
                (colorType == 0
                  ? 'warming'
                  : colorType == 1
                  ? 'warming-g'
                  : colorType == 2
                  ? 'warming-b'
                  : 'warming-p') +
                '@2x.png')})`,
            }"
          >-->
          <div
            class="tips-area"
            style="margin-bottom: 20px"
          >
            域名转入免费，转入价格为域名一年的续费价格。域名转入190的同时，该域名续费一年。
          </div>
          <table class="table-area" style="margin-bottom: 60px">
            <thead>
              <tr>
                <th><div class="line-style">域名后缀</div></th>
                <th><div class="line-style">普通会员</div></th>
                <th><div class="line-style">金牌会员</div></th>
                <th><div class="line-style">钻石会员</div></th>
                <th><div class="line-style">皇冠会员</div></th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in SuffixList" :key="index">
                <td>
                  <div class="line-style" style="justify-content: flex-start">
                    <span
                      class="c-r"
                      style="display: inline-block; min-width: 100px"
                      >{{ item.name }}</span
                    >
                    <span class="normal-f pub-m-l-60">{{ item.remark }}</span>
                  </div>
                </td>
                <td>
                  <div class="line-style">
                    <span class="c-r"
                      >￥{{ item.suffixPriceList[0].price }}</span
                    >
                  </div>
                </td>
                <td>
                  <div class="line-style">
                    <span class="c-r"
                      >￥{{ item.suffixPriceList[1].price }}</span
                    >
                  </div>
                </td>
                <td>
                  <div class="line-style">
                    <span class="c-r"
                      >￥{{ item.suffixPriceList[2].price }}</span
                    >
                  </div>
                </td>
                <td>
                  <div class="line-style">
                    <span class="c-r"
                      >￥{{ item.suffixPriceList[3].price }}</span
                    >
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </template>
    </div>

    <rule-modal
      :show.sync="ruleModelShow"
      :content="ruleContent"
      :title="ruleTitle"
    ></rule-modal>
  </div>
</template>

<script>
import { changelocation } from "@/utils/location.js";
import { debounce, trimStr } from "@/utils/format";
import { getBottom, getDnPrice } from "@/api/data";
import { saveTransferIn, agreement, getPublicKey } from "@/api/user";
import JSEncrypt from "jsencrypt";
// import transferRules from "@/static/transferRules";
export default {
  name: "VipTransferInForm",
  components: {
    ruleModal: () => import("_c/modal/ruleModal/ruleModal.vue"),
    templatePushResultModal: () =>
      import("_c/modal/templatePushResultModal/templatePushResultModal.vue"),
  },
  data() {
    return {
      ruleModelShow: false,
      ruleContent: "",
      ruleTitle: "",

      loading: false,

      rule: "0",
      domainName: "",
      code: "",

      dnText: "",
      dnNumber: 0,
      dnSet: new Set(),

      // 结果数据
      resultModalShow: false,
      resultList: [],

      dnsType: "0",
      agree: false,
      SuffixList: [],
      tablist: [
        {
          name: "转入规则",
        },
        {
          name: "转入流程",
        },
        {
          name: "转入费用",
        },
      ],
      tabActive: 0,
      ruleList: [
        "转入域名时如提示“注册商转移保护”，请联系域名现所在注册商对域名进行解锁。",
        "国际域名转入请确认距最后一次续费已满60天，否则有可能会出现转入成功续费掉年的现象。",
        "域名到期前15天不能转入。",
        "域名处于纠纷、仲裁中或法院限制转出的不能转入。",
      ],
      colorType: 0,
      content: "",
    };
  },
  created() {
    this.agreement();
    this.getPublicKey();
    this.getDnPrice();
    if (this.$storage.getColorType()) {
      this.colorType = this.$storage.getColorType();
    } else {
      this.getBottom();
    }
  },
  methods: {
    async getPublicKey() {
      if (!this.$storage.getPublicKey()) {
        let res = await getPublicKey();
        if (res.code == 200) {
          this.$storage.setPublicKey(res.data);
        }
      }
    },
    getEncrypt(data) {
      let encrypt = new JSEncrypt();
      // 设置公钥
      encrypt.setPublicKey(this.$storage.getPublicKey());
      return encrypt.encrypt(data);
    },
    async agreement() {
      const data = [11];
      const res = await agreement(data);
      if (res.code == 200 && res.result) {
        this.ruleContent = res.data[0].content;
        this.ruleTitle = res.data[0].name;
      }
    },
    async getBottom() {
      const { code, data } = await getBottom();
      if (code === 200) {
        this.colorType = data.colorType;
      }
    },
    // 获取域名价格
    async getDnPrice() {
      const type = 2;
      const { code, data } = await getDnPrice(type);
      if (code === 200) {
        this.SuffixList = data;
      }
    },
    // 函数防抖获取输入框中的域名
    getDNNumber: debounce(function () {
      let temp = this.dnText.split("\n");
      this.dnNumber = temp.filter((item) => {
        return !item.match(/^[ ]*$/);
      }).length;
    }, 200),
    // 筛选出有用域名
    getAvailableDN() {
      let temp = this.dnText.split("\n").filter((item) => {
        return !item.match(/^[ ]*$/);
      });
      let dnList = temp.map((item) => trimStr(item));
      this.dnSet = new Set(dnList);
      // storage.setPushSelectDomian([...this.dnSet]);
      this.dnText = [...this.dnSet].join("\n");
      this.dnNumber = this.dnSet.size;
    },
    async submit() {
      if (this.rule == 0) {
        if (this.domainName == null || this.domainName == "") {
          this.$Message.warning("请输入要转入的域名！");
          return;
        }
        if (this.code == null || this.code == "") {
          this.$Message.warning("请输入转移码！");
          return;
        }
        if (!this.agree) {
          this.$Message.warning(`请阅读并同意《${this.ruleTitle}》！`);
          return;
        }
        let data = {
          dnsType: this.dnsType,
          lines: [`${this.domainName},${this.getEncrypt(this.code)}`],
        };
        this.loading = true;
        let res = await saveTransferIn(data);
        if (res.code == 200) {
          if (res.data.length > 0) {
            this.resultList = res.data;
            this.resultModalShow = true;
          } else {
            let url = changelocation("/pro");
            window.open(url);
          }
        }
        this.loading = false;
      } else {
        let list = [...this.dnSet];
        let newlist = [];
        for (let i = 0; i < list.length; i++) {
          let newitem = "";
          newitem =
            list[i].split(",")[0] +
            "," +
            this.getEncrypt(list[i].split(",")[1]);
          newlist.push(newitem);
        }
        if (list.length <= 0) {
          this.$Message.warning("请至少输入一个域名");
          return;
        }
        if (!this.agree) {
          this.$Message.warning(`请阅读并同意《${this.ruleTitle}》！`);
          return;
        }
        // let lines = []
        // for(let item of list) {
        //   lines.push(item.replace(',', ' '));
        // }
        let data = {
          dnsType: this.dnsType,
          lines: newlist,
        };
        this.loading = true;
        let res = await saveTransferIn(data);
        if (res.code == 200) {
          if (res.data.length > 0) {
            this.resultList = res.data;
            this.resultModalShow = true;
          } else {
            let url = changelocation("/pro");
            window.open(url);
          }
        }
        this.loading = false;
      }
    },
    clickTab(index) {
      this.tabActive = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.number-tips {
  position: absolute;
  bottom: 10px;
  right: 20px;
}
.style-contnent {
  text-align: right;
  width: 80px;
  font-size: 14px;
  line-height: 32px;
}
.h3-i {
  @include size(10px);
  background-color: $mainColor;
  border-radius: 50%;
  margin-right: 9px;
  margin-left: 45px;
}
.long-name {
  min-width: 85px;
}
.btn-area {
  border-top: 1px solid #e4e6fa;
  padding-top: 30px;
  margin-top: 30px;
}
.rule-area {
  width: calc(100% + 80px);
  border-top: #f3f6fb solid 20px;
  margin-top: 40px;
  padding: 30px;
  position: relative;
  left: -40px;
}
.c-text {
  display: inline-block;
  width: 5px !important;
  height: 5px;
  background: #000;
  border-radius: 50%;
  margin: 8px 10px 0 0;
}
.process-area {
  padding: 10px 0 150px;
  min-height: 200px;

  .item {
    @include size(76px);
    background-color: $color-main;
    border-radius: 50%;
    // @include bg-setting(null, cover, center);
    position: relative;
    .item-inner {
      @include size(56px);
      background-color: $mainColor;
      border-radius: 50%;
      color: #fff;
      font-size: 16px;
      font-weight: 700;
    }

    .title {
      width: 180px;
      height: 32px;
      background: $color-main;
      color: $w;
      text-align: center;
      line-height: 32px;
      border-radius: 4px;
      border: 1px solid $mainColor;
    }
    span {
      width: 160px;
    }
    .content-area {
      position: absolute;
      right: 50%;
      top: 105px;
      margin-right: -100px;
    }
  }
  .long-arrow-2 {
    @include bg-setting("long-arrow-2", contain, center);
    @include size(115px, 9px);
    margin: 0 12px;
  }
}
</style>
